<template>
  <div>
    <el-button>点击添加children</el-button>
    <div v-for="(item, i) in list" :key="i">
      <template v-if="item.children.length">
        <div
          v-for="(ls, index) in item.children"
          :key="index"
          @click="add(ls.id)"
        >
          <p>{{ ls.title }}-{{ ls.phone }}</p>
        </div>
      </template>
      <p @click="add(item.phone)">{{ item.title }}-{{ item.phone }}</p>
      <!-- {{ list }} -->
    </div>
    <!-- <div v-html="a"></div> -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [],
      a: ""
    };
  },
  mounted() {
    this.list = [
      {
        id: 1,
        title: "鸟",
        phone: "18127812",
        children: []
      }
    ];
  },
  methods: {
    add(value) {
      const newList = [...this.list];
      const index = newList.findIndex(item => item.phone === value);
      newList[index]["children"] = [
        {
          id: "1-1",
          title: "鸟",
          phone: "12"
        }
      ];
      this.list = newList;
      console.log(this.list, ` this.list `);
    }
  }
};
</script>

<style></style>
